<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				
				//获取四个多选框items
					var items = document.getElementsByName("items");
				
				/*全选按钮
				 -点击按钮以后，四个多选框全部被选中
				 */
				
				//1.#checkedAllBtn
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function(){
					
					
					//遍历items
					for(var i=0;i<items.length;i++){
						//设置四个多选框为选中状态
						items[i].checked = true;
					}
					
					
				};
				//2.#checkedNoBtn
				var checkedNoBtn = document.getElementById("checkedNoBtn");
		        checkedNoBtn.onclick = function(){

					
				//遍历items
				for(var i=0;i<items.length;i++){
					//设置四个多选框为选中状态
					items[i].checked = false;
				}
				
				};
				
				//3.#checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
		        checkedRevBtn.onclick = function(){

					
				//遍历items
				for(var i=0;i<items.length;i++){
					/*if(items[i].checked){
						items[i].checked = false;
					}else{
						items[i].checked = true;
					}*/
					items[i].checked = !items[i].checked;
					
				}
				
				};
				
				//4.#sendBtn
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function(){
					for(var i=0;i<items.length;i++){
						if(items[i].checked){
							alert(items[i].value);
						}
					}
				};
				
			};
		</script>
	</head>
	<body>
		
		
		<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
		
	</body>
</html>
